import { Stack, useNavigation } from "expo-router";
import { StyleSheet, TouchableOpacity } from "react-native";

import React from "react";
import { View, Text } from "@components/Themed";
import Animated, { SlideInDown, interpolate, useAnimatedRef, useAnimatedStyle, useScrollViewOffset } from "react-native-reanimated";
import { AntDesign } from "@expo/vector-icons";
import CustomHeader from "@components/CustomHeader";

import BaseStyles from "@constants/BaseStyles";
const baseStyles = BaseStyles();

import Styles from "@constants/Styles";

export default function AuthLayout() {
    const navigation = useNavigation();

    return (
        <Stack
            screenOptions={{
                header: (props) => {
                    const { navigation, route, options } = props;
                    const title = getHeaderTitle(options, route.name);
                    return (
                        <CustomHeader
                            title={title}
                            iosHeaderShown={true}
                            onBackPress={() => navigation.goBack()}
                            // rightComponent={
                            //     <View>
                            //         <Text>21231</Text>
                            //     </View>
                            // } // Replace with your component
                        />
                    );
                },
                animation: "fade",
            }}
        >
            <Stack.Screen
                name="index"
                options={{
                    header: (props) => {
                        const { navigation, route, options } = props;
                        const title = getHeaderTitle(options, route.name);
                        return (
                            <CustomHeader
                                title={title}
                                iosHeaderShown={true}
                                onBackPress={() => navigation.goBack()}

                                // rightComponent={
                                // <View style={styles.rightIcon}>
                                //     {/* <Text>55555</Text> */}
                                //     <TouchableOpacity style={{ width: 22 }}>
                                //         <AntDesign name="arrowleft" size={22} color="black" />
                                //     </TouchableOpacity>
                                //     <TouchableOpacity style={{ width: 22 }}>
                                //         <AntDesign name="arrowleft" size={22} color="black" />
                                //     </TouchableOpacity>

                                // </View>
                                // } // Replace with your component
                            />
                        );
                    },
                }}
            />
            <Stack.Screen
                name="authUser"
                options={{
                    title: "authUser", // 设置屏幕标题
                    // headerShown: false
                    animation: "fade",
                }}
            />
        </Stack>
    );
}

const styles = StyleSheet.create({
    rightIcon: {
        // ...baseStyles().
    },
});

function getHeaderTitle(options, routeName) {
    // Determine the header title based on the route name or options
    return options.headerTitle !== undefined ? options.headerTitle : routeName;
}
